<template>
	<el-main>
		<el-alert
			title="感谢Vue3.0版本的vue.draggable.next拖拽组件 https://github.com/SortableJS/vue.draggable.next"
			type="success"
			style="margin-bottom: 20px"
		></el-alert>
		<div class="dragList">
			<draggable
				v-model="listA"
				animation="200"
				item-key="id"
				group="people"
			>
				<template #item="{ element }">
					<div class="item">{{ element.text }}</div>
				</template>
			</draggable>
		</div>
		<div class="dragList">
			<draggable
				v-model="listB"
				animation="200"
				item-key="id"
				group="people"
			>
				<template #item="{ element }">
					<div class="item">{{ element.text }}</div>
				</template>
			</draggable>
		</div>
	</el-main>
</template>

<script>
import draggable from "vuedraggable";
export default {
	name: "drag",
	components: {
		draggable,
	},
	data() {
		return {
			listA: [
				{
					id: 1,
					text: "A1",
				},
				{
					id: 2,
					text: "A2",
				},
				{
					id: 3,
					text: "A3",
				},
				{
					id: 4,
					text: "A4",
				},
				{
					id: 5,
					text: "A5",
				},
				{
					id: 6,
					text: "A6",
				},
				{
					id: 7,
					text: "A7",
				},
				{
					id: 8,
					text: "A8",
				},
				{
					id: 9,
					text: "A9",
				},
			],
			listB: [
				{
					id: 1,
					text: "B1",
				},
				{
					id: 2,
					text: "B2",
				},
				{
					id: 3,
					text: "B3",
				},
				{
					id: 4,
					text: "B4",
				},
				{
					id: 5,
					text: "B5",
				},
				{
					id: 6,
					text: "B6",
				},
				{
					id: 7,
					text: "B7",
				},
				{
					id: 8,
					text: "B8",
				},
				{
					id: 9,
					text: "B9",
				},
			],
		};
	},
};
</script>

<style scoped>
.dragList {
	overflow: auto;
}
.item {
	cursor: move;
	float: left;
	background: #fff;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	margin: 0 15px 15px 0;
	border: 1px solid #e6e6e6;
}
.dragList .sortable-ghost {
	opacity: 0.5;
}
</style>
